<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <script type="application/javascript" src="../static/lib/vue.js"></script>
    <script type="application/javascript" src="../static/lib/axios.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <style>

    </style>
</head>
<body>
<div class="layui-fluid" id="app-sgg">


    <div class="layui-row">
        <div class="layui-col-sm4">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 100px"></div>
        </div>
        <div class="layui-col-sm4">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 100px">
                <h1>房间-信息：{{roomInfo.name}}-{{roomInfo.no}}</h1>
                <h1>回合-信息：{{roomInfo.roundNo}}</h1>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 100px">
                <button @click="getDataFromServer" style="font-size: 30px">获取数据</button>
                <button @click="calCredit" style="font-size: 30px">计算积分</button>
                <button @click="openDetail" style="font-size: 30px">对局详情</button>
            </div>
        </div>

    </div>
    <div class="layui-row">
        <div  class="layui-col-sm4"  style="border:4px solid  #90bd21;">
            <div class="grid-demo grid-demo-bg1" style="background-color: #90bd21;height: 400px">
                <div class="layui-row">
                    <div class="layui-col-sm4" v-for="card in playerMaster.cardList">
                        <div class="grid-demo grid-demo-bg1"
                             style="background-color: #90bd21;height: 250px">

                            <img style="width: 150px;height: 220px;"
                                 :src="`http://localhost:8080/sangong/img/getPic?path=puke&picName=${card.cardEnum.picUrl}`"/>
                        </div>
                    </div>


                </div>
                <div class="layui-row">

                    <div class="layui-col-sm12">
                        <div class="grid-demo grid-demo-bg1" style="background-color: #11b098;height:150px">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <div class="layui-row">
                                        <div class="layui-col-sm4">
                                            <div v-if="playerMaster.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #d39a09;height: 150px">
                                                <img style="width: 50px;height: 120px;"
                                                     :src="`http://localhost:8080/sangong/img/getPic?path=touxiang&picName=${playerMaster.user.imgUrl}`"/>
                                                <h2>{{playerMaster.user.name}}</h2>

                                            </div>
                                        </div>
                                        <div class="layui-col-sm8">
                                            <div v-if="playerMaster.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #09d3c9;height: 150px">
                                                <h1 style="color: #952016" v-if="playerMaster.isHead">庄家</h1>
                                                <h1 v-else>闲家</h1>
                                                <h2 style="color: #923939">积分：{{playerMaster.score}}</h2>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #d0665d;height: 150px">
                                        <div v-if="playerMaster.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #1ad309;height: 150px">

                                            <h1 style="color: #923939">点数：{{playerMaster.scoreEnum.name}}</h1>
                                            <h1 style="color: #923939">筹码：{{playerMaster.chip}}</h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #a01fe0;height: 150px">
                                        <div v-if="playerMaster.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #d3c209;height: 150px">
                                            <h1 style="color: #923939">倍数：{{playerMaster.scoreEnum.multiple}}</h1>
                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-sm4"  style="border:4px solid  #064fb0;">
            <div class="grid-demo grid-demo-bg1" style="background-color: #90bd21;height: 400px">
                <div class="layui-row">
                    <div class="layui-col-sm4" v-for="card in playerOne.cardList">
                        <div class="grid-demo grid-demo-bg1"
                             style="background-color: #064fb0;height: 250px">

                            <img style="width: 150px;height: 220px;"
                                 :src="`http://localhost:8080/sangong/img/getPic?path=puke&picName=${card.cardEnum.picUrl}`"/>
                        </div>
                    </div>


                </div>
                <div class="layui-row">

                    <div class="layui-col-sm12">
                        <div class="grid-demo grid-demo-bg1" style="background-color: #11b098;height:150px">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <div class="layui-row">
                                        <div class="layui-col-sm4">
                                            <div v-if="playerOne.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #d39a09;height: 150px">
                                                <img style="width: 50px;height: 120px;"
                                                     :src="`http://localhost:8080/sangong/img/getPic?path=touxiang&picName=${playerOne.user.imgUrl}`"/>
                                                <h2>{{playerOne.user.name}}</h2>

                                            </div>
                                        </div>
                                        <div class="layui-col-sm8">
                                            <div v-if="playerOne.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #09d3c9;height: 150px">
                                                <h1 style="color: #952016" v-if="playerOne.isHead">庄家</h1>
                                                <h1 v-else>闲家</h1>
                                                <h2 style="color: #923939">积分：{{playerOne.score}}</h2>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #d0665d;height: 150px">
                                        <div v-if="playerOne.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #1ad309;height: 150px">

                                            <h1 style="color: #923939">点数：{{playerOne.scoreEnum.name}}</h1>
                                            <h1 style="color: #923939">筹码：{{playerOne.chip}}</h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #a01fe0;height: 150px">
                                        <div v-if="playerOne.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #d3c209;height: 150px">
                                            <h1 style="color: #923939">倍数：{{playerOne.scoreEnum.multiple}}</h1>
                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-sm4" style="border:4px solid  #952016;">
            <div class="grid-demo grid-demo-bg1" style="background-color: #90bd21;height: 400px">
                <div class="layui-row">
                    <div class="layui-col-sm4" v-for="card in playerTwo.cardList">
                        <div class="grid-demo grid-demo-bg1"
                             style="background-color: #b01151;height: 250px">

                            <img style="width: 150px;height: 220px;"
                                 :src="`http://localhost:8080/sangong/img/getPic?path=puke&picName=${card.cardEnum.picUrl}`"/>
                        </div>
                    </div>


                </div>
                <div class="layui-row">

                    <div class="layui-col-sm12">
                        <div class="grid-demo grid-demo-bg1" style="background-color: #11b098;height:150px">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <div class="layui-row">
                                        <div class="layui-col-sm4">
                                            <div v-if="playerTwo.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #d39a09;height: 150px">
                                                <img style="width: 50px;height: 120px;"
                                                     :src="`http://localhost:8080/sangong/img/getPic?path=touxiang&picName=${playerTwo.user.imgUrl}`"/>
                                                <h2>{{playerTwo.user.name}}</h2>

                                            </div>
                                        </div>
                                        <div class="layui-col-sm8">
                                            <div v-if="playerTwo.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #09d3c9;height: 150px">
                                                <h1 style="color: #952016" v-if="playerTwo.isHead">庄家</h1>
                                                <h1 v-else>闲家</h1>
                                                <h2 style="color: #923939">积分：{{playerTwo.score}}</h2>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #d0665d;height: 150px">
                                        <div v-if="playerTwo.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #1ad309;height: 150px">

                                            <h1 style="color: #923939">点数：{{playerTwo.scoreEnum.name}}</h1>
                                            <h1 style="color: #923939">筹码：{{playerTwo.chip}}</h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #1fe032;height: 150px">
                                        <div v-if="playerTwo.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #d3c209;height: 150px">
                                            <h1 style="color: #923939">倍数：{{playerTwo.scoreEnum.multiple}}</h1>
                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <div class="layui-row">
        <div class="layui-col-sm4">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 450px">25%</div>
        </div>
        <div class="layui-col-sm4" style="border:4px solid  #1ad309;">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 450px">


                <div class="layui-row">
                    <div class="layui-col-sm4" v-for="card in playerMe.cardList">
                        <div class="grid-demo grid-demo-bg1"
                             style="background-color: #21b011;height: 250px">

                            <img style="width: 150px;height: 220px;"
                                 :src="`http://localhost:8080/sangong/img/getPic?path=puke&picName=${card.cardEnum.picUrl}`"/>
                        </div>
                    </div>


                </div>
                <div class="layui-row">

                    <div class="layui-col-sm12">
                        <div class="grid-demo grid-demo-bg1" style="background-color: #11b098;height:150px">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <div class="layui-row">
                                        <div class="layui-col-sm4">
                                            <div v-if="playerMe.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #d39a09;height: 150px">
                                                <img style="width: 50px;height: 120px;"
                                                     :src="`http://localhost:8080/sangong/img/getPic?path=touxiang&picName=${playerMe.user.imgUrl}`"/>
                                                <h2>{{playerMe.user.name}}</h2>

                                            </div>
                                        </div>
                                        <div class="layui-col-sm8">
                                            <div v-if="playerMe.user" class="grid-demo grid-demo-bg1"
                                                 style="background-color: #09d3c9;height: 150px">
                                                <h1 style="color: #952016" v-if="playerMe.isHead">庄家</h1>
                                                <h1 v-else>闲家</h1>
                                                <h2 style="color: #923939">积分：{{playerMe.score}}</h2>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: #d0665d;height: 150px">
                                        <div v-if="playerMe.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #1ad309;height: 150px">

                                            <h1 style="color: #923939">点数：{{playerMe.scoreEnum.name}}</h1>
                                            <h1 style="color: #923939">筹码：{{playerMe.chip}}</h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="grid-demo grid-demo-bg1"
                                         style="background-color: rgba(31,224,115,0.54);height: 150px">
                                        <div v-if="playerMe.user" class="grid-demo grid-demo-bg1"
                                             style="background-color: #d3c209;height: 150px">
                                            <h1 style="color: #923939">倍数：{{playerMe.scoreEnum.multiple}}</h1>
                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="grid-demo grid-demo-bg1" style="background-color: #1fe0ca;height: 450px">25%</div>
        </div>

    </div>
</div>

</body>

<script>


    var apps = new Vue({
        el: "#app-sgg",
        methods: {

            getDataFromServer: function () {
                var that = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/sangong/room/info',
                    data: {
                        roomNo: that.roomInfo.no,
                        userId: "11",
                    },
                    responseType: 'json'
                }).then(function (response) {
                    if (!response.data.success) {
                        if ("CARD_OVER" == response.data.errorMsg) {
                            alert("牌不够了，确认后将会进行洗牌!");
                            that.washCard();
                        } else {
                            alert(response.data.errorMsg);
                        }


                        return;
                    }
                    var data = response.data.data;
                    console.log(response.data)
                    that.playerList = data.playerList;
                    that.playerMaster = data.playerMaster;
                    that.playerOne = data.playerOne;
                    that.playerTwo = data.playerTwo;
                    that.playerMe = data.playerMe;
                    that.roomInfo = {"name": data.roomName, "no": data.roomNo, "roundNo": data.roundNo}
                }, function (error) {
                    console.log(error)
                });
            },
            calCredit: function () {
                var that = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/sangong/room/calCredit',
                    data: {
                        roomNo: that.roomInfo.no,
                        roundNo: that.roomInfo.roundNo
                    },
                    responseType: 'json'
                }).then(function (response) {
                    if (!response.data.success) {
                        alert(response.data.errorMsg);
                        return;
                    }
                    var data = response.data.data;
                    let scoreMap = data.reduce((acc, item) => {
                        acc.set(item.user.id, item.score);
                        return acc;
                    }, new Map());
                    console.log(scoreMap);
                    that.playerMaster.score = scoreMap.get(that.playerMaster.user.id);
                    that.playerOne.score = scoreMap.get(that.playerOne.user.id);
                    that.playerTwo.score = scoreMap.get(that.playerTwo.user.id);
                    that.playerMe.score = scoreMap.get(that.playerMe.user.id);
                    that.playDetailListFunction();

                }, function (error) {
                    console.log(error)
                });
            }, playDetailListFunction: function () {
                {
                    var that = this;
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/sangong/room/getPlayRecord',
                        data: {
                            roomNo: that.roomInfo.no/*,
                            roundNo: that.roomInfo.roundNo*/
                        },
                        responseType: 'json'
                    }).then(function (response) {
                        if (!response.data.success) {
                            alert(response.data.errorMsg);
                            return;
                        }
                        that.playDetailList = response.data.data;


                    }, function (error) {
                        console.log(error)
                    });
                }
            }, washCard: function () {
                {
                    var that = this;
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/sangong/room/washCard',
                        data: {
                            roomNo: that.roomInfo.no
                        },
                        responseType: 'json'
                    }).then(function (response) {
                        if (!response.data.success) {
                            alert(response.data.errorMsg);
                            return;
                        }


                    }, function (error) {
                        console.log(error)
                    });
                }
            }, openDetail: function () {
                {
                    var that = this;

                    layer.open({
                        title: '对局详情',
                        type: 2,//很关键，只有type=2时，才会访问其他页面，否则以字符串的格式显示
                        content: 'detail.html?roomNo='+that.roomInfo.no+'&roomName='+
                            encodeURI(that.roomInfo.name),//问号后面向子页面传递参数，可以多个
                        area: ['800px', '600px'],
                        btn: ['关闭'],

                        btn1:function(){
                            layer.closeAll()
                        }
                    });

                }
            }
        },
        data: {
            playerList: [],
            roomInfo: {},
            playDetailList: [],
            playerMaster: {},
            playerOne: {},
            playerTwo: {},
            playerMe: {}


        }
    });
</script>
</html>